<template>
  <main class="article shadow">
    <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleChange" row-key="id"
      :loading="loading">
      <template #type="{ text }">
        <a-tag :color="useColor(text)"> {{ text }} </a-tag>
      </template>
      <template #edit="{ text: { id } }">
        <a-popconfirm title="你确定要删除么?" ok-text="是" cancel-text="否" @confirm="destroy(id)" @cancel="cancel">
          <a-button class="mx-1" type="danger">删除</a-button>
        </a-popconfirm>
        <a-button class="mx-1" type="primary" @click="update(id)">更新</a-button>
        <a-button class="mx-1" @click="search(id)">查看</a-button>
      </template>
    </a-table>

    <section class="action">
      <a-button type="primary" @click="toEditorPage">
        <EditOutlined />
        写点儿什么
      </a-button>
    </section>
  </main>
</template>
<script>
  import { Table } from "ant-design-vue";
  import { articleViewConfig } from "@vp/manage/article.js";
  import { useColorMap } from "@u/color.js";
  import {
    useRouteNameToPage,
    useRouteParamChange,
    useRoutePathToPage,
    useRouteNameWithQueryToPage,
  } from "@u/router.js";
  import { useLinkedRouteParam } from "@u/route";
  import { ref, watchEffect } from "vue";
  import http, { lazyRequest } from "@u/http";
  import { useErrorNotice, useSuccessNotice } from "@u/notice";
  import { useState } from "@u/hooks";
  import { EditOutlined } from "@ant-design/icons-vue";

  export default {
    components: {
      [Table.name]: Table,
      EditOutlined,
    },
    setup() {
      const { columns, pagination } = articleViewConfig;

      const colorMap = new Map([
        ["日记", "#009688"],
        ["随笔", "#2196F3"],
      ]);

      const useColor = useColorMap(colorMap);

      pagination.current = useLinkedRouteParam("pageNum");
      const pageNumParamChange = useRouteParamChange("pageNum");
      const handleChange = ({ current }) => pageNumParamChange(current);

      const toEditorPage = useRouteNameToPage("ManageEditor");

      const data = ref([]);

      const [loading, setLoading] = useState(false);

      watchEffect(
        async () => {
          setLoading(true);
          try {
            const request = http.get(
              `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
            );

            const [res] = await lazyRequest(request, 400);
            data.value = res.data.rows;
            pagination.total = res.data.count;
          } catch (error) {
            useErrorNotice({
              message: "文章列表获取失败",
              description: error.reason || "未知错误",
            });
          } finally {
            setLoading(false);
          }
        },
        {
          flush: "post",
        }
      );

      const destroy = async (id) => {
        setLoading(true);
        try {
          await http.delete(`/articles/${id}`);

          const request = http.get(
            `/articles?limit=${pagination.pageSize}&page=${pagination.current}`
          );

          const [res] = await lazyRequest(request, 200);
          data.value = res.data.rows;
          pagination.total = res.data.count;

          useSuccessNotice({
            message: "删除成功",
          });
        } catch (error) {
          useErrorNotice({
            message: "删除失败",
            description: error.reason || "未知错误",
          });
        } finally {
          setLoading(false);
        }
      };

      const search = (id) => {
        const toPage = useRoutePathToPage(`/detail/${id}`);
        toPage();
      };

      const update = useRouteNameWithQueryToPage("ManageEditor", "id");

      return {
        data,
        columns,
        useColor,
        pagination,
        handleChange,
        toEditorPage,
        loading,
        destroy,
        search,
        update,
      };
    },
  };
</script>

<style scoped>
  .article {
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #cfd8dc;
  }

  .action {
    text-align: center;
  }
</style>